<template>
	<div class="all">
		<div class="hot">
			<div class="hot_title">
				<h2>热门推荐</h2>
				<a href="#" class="fr">
					<svg class="index__icon__src-partition-recommend- index__fill__src-partition-recommend-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-paihangbang1"></use></svg>
					<span>排行榜</span>
					<svg class="index__icon__src-partition-recommend-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-gengduo"></use></svg>
				</a>
			</div>
			<div class="hot_main">
				<ul>
					<li v-for="(i,index) of hotlist" >
						<a href="#">
							<div>
								<img :src="i.pic"/>
								<div>
									<div>
										<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bofangshu"></use></svg>
									</div>
									<span>{{i.play}}万</span>
									<div>
										<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-danmushu"></use></svg>
									</div>
									<span>{{i.video_review}}</span>
								</div>
							</div>
							<p>{{i.title}}</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	export default{
		created(){
//			console.log(this.tid)
		},
		mounted(){
			this.getsp()
		},
		props:{
			tid:{
				type:[Number,String],
				default:"1"
			}
		},
		data(){
			return{
				hotlist:[]
			}
		},
		methods:{
			getsp(){
				axios.get('/sj',{
						params:{
							"rid":this.tid
						}
					})
				.then((a)=>{
						a.data.data.forEach(function(el){
							el.play=(el.play/10000).toFixed(1);
						})
						this.hotlist=a.data.data;
							console.log(a)
					})
			}
		},
		watch:{
			tid(n){
					axios.get('/sj?rid='+n).then((a)=>{
						a.data.data.forEach(function(el){
							el.play=(el.play/10000).toFixed(1);
						})
						this.hotlist=a.data.data;
							console.log(a)
					})
			}
		}
	}
</script>

<style lang="scss">
	.all{
		width: 100%;
		padding: 3px 10px;
		.hot{
			.hot_title{
				padding: 10px 0;
				h2{
					color: #212121;
					font-size: 18px;
					font-weight: normal;
					line-height: 30px;
					height: 30px;
					display: inline-block;
				}
				a{
					
					height: 30px;
					svg{
						vertical-align: middle;
						width: 20px;
						display: inline-block;
						height: 80%;
						&:first-of-type{
							fill: #ffa726;
						}
						&:last-of-type{
							fill: #aaa;
						}
					}
					span{
						color: #ffa726;
						vertical-align: middle;
						line-height: 30px;
						font-size: 13px;
					}
				}
			}
			.hot_main{
				>ul{
					width: 100%;
					>li{
						display: inline-block;
						width: 46%;
						margin: 1.5% 2%;
						>a{
							display: inline-block;
							width: 100%;
							height: 100%;
							>div{
								position: relative;
								width: 100%;
								img{
									width: 100%;
								}
								>div{
									
									height: 20px;
									position: absolute;
									bottom: 2px;
									div{
										vertical-align: middle;
										width: 16px;
										display:inline-block;
										height: 16px;
										svg{
											width: 20px;
											display:inline-block;
											height: 100%;
											fill:#fff;
										}
										&:first-of-type{
											margin-left: 5px;
										}
										&:last-of-type{
											margin-left: 33px;
										}
									}
									span{
										font-size: 14px;
										line-height: 16px;
										vertical-align: middle;
										color: #FFFFFF;
									}
									
								}
							}
							>p{
								font-size: 14px;
							    color: #212121;
							    letter-spacing: 0;
							    line-height: 20px;
							    text-align: left;
							    width: 100%;
							    height: 40px;
							    overflow: hidden;
							    text-overflow: ellipsis;
							    -webkit-line-clamp: 2;
							    display: -webkit-box;
							    -webkit-box-orient: vertical;
							}
						}
					}
				}
			}
		}
		
	}
</style>